<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 循环数组 -->
            <!-- <li v-for="item in arr">{{ item }}</li> -->
            <!-- <li v-for="(item,index) in arr">{{ index }} = {{ item }}</li> -->

            <!-- 循环对象 -->
            <!-- <li v-for="value in user">{{ value }}</li> -->
            <!-- <li v-for="(value,key) in user">{{ key }} = {{ value }}</li> -->
            <!-- <li v-for="(value,key,index) in user">{{ index }} = {{ key }} = {{ value }}</li> -->

            <!-- 循环数字 -->
            <!-- <li v-for="item in num">{{ item }}</li> -->
            <!-- <li v-for="(item,index) in num">{{ index }} = {{ item }}</li> -->

            <!-- 循环字符串 -->
            <!-- <li v-for="item in str">{{ item }}</li> -->
            <!-- <li v-for="(item,index) in str">{{ index }} = {{ item }}</li> -->

            <!-- 循环对象数组：二重循环 -->
            <!-- <li v-for="user in users">
                <span v-for="(v,k) in user">{{ k }} = {{ v }} </span>
            </li> -->
        </ul>
        <hr>

        <!-- 
            当更新v-for渲染的元素列表时
                默认是就地更新每个元素的内容，效率高，但无法跟踪每个节点的身份
                可以为每一项提供一个唯一的key属性，更新时元素会移动位置，能够跟踪每个节点的身份，从而重用和重新排序现有的元素（推荐）

         -->
        <button @click="addItem">添加</button>
        <ul>
            <li v-for="(item,index) in arr" :key="item">
                <input type="checkbox"> {{item}}
            </li>
        </ul>

    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:['tom','jack','alice','mike'],
            user:{
                id:9527,
                name:'唐伯虎',
                age:25
            },
            num:5,
            str:'hello',
            users:[
                {
                    id:9527,
                    name:'唐伯虎',
                    age:25
                },
                {
                    id:3306,
                    name:'秋香',
                    age:21
                },
                {
                    id:1008,
                    name:'石榴姐',
                    age:24
                }
            ]
        },
        methods: {
            addItem(){
                this.arr.unshift('admin'); // 向最前面添加元素
            }
        },
    })
</script>
</html>